<template>
  <div>
    <a-button type="primary" @click="showDrawer">
      <template #icon>
        <PlusOutlined />
      </template>添加
    </a-button>
    <a-table :dataSource="dataSource" :columns="columns">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-divider type="vertical"/>
          <a @click="onDelete(record.sourceId)" >删除</a>
        </template>
      </template>
    </a-table>
    <a-drawer
      title="创建API"
      :width="720"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
    >
      <a-form :model="form" :rules="rules" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="类型" name="name">
              <a-input v-model:value="form.name" placeholder="请输入类型" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="数据源ID" name="sourceId">
              <a-input v-model:value="form.sourceId" placeholder="请输入数据源ID" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="请求地址" name="url">
              <a-input
                v-model:value="form.url"
                style="width: 100%"
                addon-before="http://"
                addon-after=".com"
                placeholder="please enter url"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="是否自动请求" name="switch">
              <a-switch v-model:checked="form.switchChecked" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="是否支持跨域" name="switch">
              <a-switch v-model:checked="form.cross" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="请求方法" name="type">
              <a-select v-model:value="form.type" placeholder="请选择请求方法">
                <a-select-option value="GET">GET</a-select-option>
                <a-select-option value="POST">POST</a-select-option>
                <a-select-option value="OPTIONS">OPTIONS</a-select-option>
                <a-select-option value="PUT">PUT</a-select-option>
                <a-select-option value="DELETE">DELETE</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="超时时长(毫秒)" name="switch">
              <a-input-number v-model:value="form.timer" style="width:100%;"></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="请求头信息" name="info">
              <a-select v-model:value="form.info" placeholder="Please a-s an info">
                <a-select-option value="xiao">Xiaoxiao Fu</a-select-option>
                <a-select-option value="mao">Maomao Zhou</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="请求参数" name="owner">
              <a-space
                v-for="(user, index) in form.users"
                :key="user.id"
                style="display: flex; margin-bottom: 8px"
                align="baseline"
              >
                <a-form-item
                  :name="['users', index, 'first']"
                  :rules="{
                    required: true,
                    message: 'Missing name',
                    }"
                >
                  <a-input v-model:value="user.first" placeholder="name" />
                </a-form-item>
                <a-form-item
                  :name="['users', index, 'last']"
                  :rules="{
                    required: true,
                    message: 'Missing last name',
                    }"
                >
                  <a-input v-model:value="user.last" placeholder />
                </a-form-item>
                <MinusCircleOutlined @click="removeUser(user)" />
              </a-space>
              <a-button type="dashed" block @click="addUser">
                <PlusOutlined />
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #extra>
        <a-space>
          <a-button @click="onClose">取消</a-button>
          <a-button type="primary" @click="onSave">保存</a-button>
        </a-space>
      </template>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import { MinusCircleOutlined,PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, ref } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import type { FormInstance } from 'ant-design-vue';
export default defineComponent({
  components: {
    MinusCircleOutlined,
    PlusOutlined,
  },
  setup() {
    interface User {
        first: string;
        last: string;
        id: number;
    }
    const dataSource:any = ref(JSON.parse(localStorage.getItem("localScoure")) || []);

    const columns = [
        {
            title: '数据源ID',
            dataIndex: 'sourceId',
            key: 'sourceId',
        },
        {
            title: '操作',
            dataIndex: 'operation',
        },
    ];
    const form = reactive({
      users: [],
      name: '',
      sourceId:'',
      url: '',
      owner: '',
      type: '',
      switchChecked:'',
      cross:'',
      timer:'',
      info:''
    });
    const removeUser = (item: User) => {
      let index = form.users.indexOf(item);
      if (index !== -1) {
        form.users.splice(index, 1);
      }
    };
    const addUser = () => {
      form.users.push({
        first: '',
        last: '',
        id: Date.now(),
      });
    };
    const rules: Record<string, Rule[]> = {
      sourceId: [{ required: true }],
      url: [{ required: true }],
      type: [{ required: true }],
      cross: [{ required: true }],
    };
    const visible = ref<boolean>(false);

    const showDrawer = () => {
      visible.value = true;
    };

    const onClose = () => {
      visible.value = false;
    };
    const onSave = () => {
      let localData = JSON.parse(localStorage.getItem("localScoure")) || []
      localData.push({...form})
      localStorage.setItem("localScoure",JSON.stringify(localData))
      dataSource.value = localData
      visible.value = false;
    };
    const onDelete = (sourceId:string) => {
      dataSource.value = dataSource.value.filter(item => item.sourceId !== sourceId);
      localStorage.setItem("localScoure",JSON.stringify(dataSource.value))
    };
    return {
        dataSource,
        columns,
        form,
        visible,
        rules,
        showDrawer,
        onClose,
        removeUser,
        addUser,
        onSave,
        onDelete
    };
  },
});
</script>

